<template>
	<div>
		<v-hover v-slot:default="{ hover }"   transition="slide-y-transition">
			<v-card class="mx-3 px-3 mt-12">    <!--表格-->
				<v-expand-transition>
					<zzofferset :offset="hover ? 25 : 10">
						<v-card color="primary" class="title " :elevation="10" dark>
							{{user_label}}列表	<!-- v-icon -->
						</v-card>
					</zzofferset>
				</v-expand-transition>
				<v-row class="mx-0" align="center" justify="end">
					<v-btn color="primary" large outlined @click="userToAdd">
						<v-icon left>add</v-icon>添加
					</v-btn>
					<v-btn color="primary" large outlined @click="userPage" class="mx-5">
						<v-icon left>search</v-icon>查询
					</v-btn>
				</v-row>
				<!--查询条件-->
				<v-layout wrap>
					<v-flex class="px-1" xs6 sm3 md2>
						<zzdate hide-details v-model="user_page_param.startTimes" label="起始时间"></zzdate>
					</v-flex >
					<v-flex class="px-1" xs6 sm3 md2>
						<zzdate hide-details v-model="user_page_param.endTimes" label="结束时间" :allowedDates="zz.fun_dateCompare(user_page_param.startTimes,false,true)"></zzdate>
					</v-flex >
					<v-flex class="px-1" xs6 sm3 md2>
						<zzinput hide-details clearable v-model="user_page_param.username" :label="user_labels.username"></zzinput>
					</v-flex>
					<v-flex class="px-1" xs6 sm3 md2>
						<zzinput hide-details clearable v-model="user_page_param.password" :label="user_labels.password"></zzinput>
					</v-flex>
					<v-flex class="px-1" xs6 sm3 md2>
						<zzselect hide-details clearable v-model="user_page_param.enabled" :label="user_labels.enabled" :items="items_boolean"></zzselect>
					</v-flex>
					<v-flex class="px-1" xs6 sm3 md2>
						<zzselect hide-details clearable v-model="user_page_param.sex" classname="EnumSex" :label="user_labels.sex"></zzselect>
					</v-flex>
					<v-flex class="px-1" xs6 sm3 md2>
						<v-text-field hide-details clearable v-model="user_page_param.roles" :label="user_labels.roles"></v-text-field>
					</v-flex>
				</v-layout>
				<v-divider></v-divider>
				<!--表格-->
				<v-data-table
						:headers="user_headers"
						:items="users"
						:server-items-length="user_total"
						:loading="user_loading"
						:footerProps="{itemsPerPageOptions:[10,50,500]}"
						:page.sync="user_pagein.curr"
						:items-per-page.sync="user_pagein.size"
						:sort-by.sync="user_pagein.sortProps"
						:sort-desc.sync="user_pagein.sortDesc"
						multi-sort
				>
					<template v-slot:item.enabled="{ item }">
						<zzspan :value="item.enabled"></zzspan>
					</template>
					<template v-slot:item.sex="{ item }">
						<zzspanDict :value="item.sex" classname="EnumSex"></zzspanDict>
					</template>
					<template v-slot:item.action="{ item }">
						<v-btn color="primary" outlined class="mr-2" @click="userToEdit(item)">
							<v-icon left>edit</v-icon>
							编辑
						</v-btn>
						<v-menu offset-x>
							<template v-slot:activator="{ on }">
								<v-btn small color="warning" v-on="on" outlined class="pa-0">
									<v-icon>delete</v-icon>
								</v-btn>
							</template>
							<v-btn small color="warning" outlined @click="userDelete(item)">
								确认删除
							</v-btn>
						</v-menu>
					</template>
				</v-data-table>
			</v-card>
		</v-hover>
		<!--编辑框-->
		<v-dialog v-model="user_dialog" max-width="600px">
			<v-card :loading="user_loading">
				<v-card-title class="headline grey lighten-4" primary-title>
					{{ user_opt + ' ' + user_label }}
				</v-card-title>
				<v-card-text>
					<v-form ref="user_form">
						<v-container grid-list-md>
							<v-layout wrap>
								<v-flex xs12 sm6 md4>
									<v-text-field v-model="user_form.username" :label="user_labels.username" :rules="[]"></v-text-field>
								</v-flex>
								<v-flex xs12 sm6 md4>
									<v-text-field v-model="user_form.password" :label="user_labels.password" :rules="[]"></v-text-field>
								</v-flex>
								<v-flex xs12 sm6 md4>
									<zzcheckbox v-model="user_form.enabled" :label="user_labels.enabled" :rules="[]"></zzcheckbox>
								</v-flex>
								<v-flex xs12 sm6 md4>
									<zzselect v-model="user_form.sex" classname="EnumSex" :label="user_labels.sex" :rules="[]"></zzselect>
								</v-flex>
								<v-flex xs12 sm6 md4>
									<v-text-field v-model="user_form.roles" :label="user_labels.roles" :rules="[]"></v-text-field>
								</v-flex>
								<v-flex xs12 sm6 md4>
								</v-flex>
							</v-layout>
						</v-container>
					</v-form>
				</v-card-text>
				<v-divider></v-divider>
				<v-card-actions class="pa-0 d-inline">
					<v-row class="pa-0 ma-0">
						<v-col class="pa-0">
							<v-btn x-large block text @click="user_dialog = false">取消</v-btn>
						</v-col>
						<v-col class="pa-0">
							<v-btn color="primary" x-large block text @click="userAdd" v-if="user_opt === '添加'">{{user_opt}}</v-btn>
							<v-btn color="primary" x-large block text @click="userUpdate" v-else :disabled="user_loading">{{user_opt}}</v-btn>
						</v-col>
					</v-row>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
  import mixin_user from './mixin_user'
  export default {
    name: 'user',
    mixins: [
      mixin_user,
    ],
  }
</script>
<!--<style scoped lang="scss">-->

<!--</style>-->
